<p style="padding: 5px;"></p>
<nz-spin [nzSpinning]="loading">
  <nz-card class="cwgl-t">
    <nz-row nzGutter="24">
      <nz-col nzMd="24" nzLg="24" nzXl="6" nzXXl="6" class="cwgl-t-b">
        <div class="cwgl-wrap cwgl-t-b-1">
          <div class="cwgl-wrap-t">
            <div class="cwgl-wrap-t-l">直租车辆</div>
            <i class="icon icon-01"></i>
          </div>
          <div class="cwgl-wrap-b">{{product.fxjOut11}} 辆</div>
        </div>
      </nz-col>
      <nz-col nzMd="24" nzLg="24" nzXl="6" nzXXl="6" class="cwgl-t-b">
        <div class="cwgl-wrap cwgl-t-b-2">
          <div class="cwgl-wrap-t">
            <div class="cwgl-wrap-t-l">回租车辆</div>
            <i class="icon icon-02"></i>
          </div>
          <div class="cwgl-wrap-b">{{product.fxjOut12}} 辆</div>
        </div>
      </nz-col>
      <nz-col nzMd="24" nzLg="24" nzXl="6" nzXXl="6" class="cwgl-t-b">
        <div class="cwgl-wrap cwgl-t-b-3">
          <div class="cwgl-wrap-t">
            <div class="cwgl-wrap-t-l">网约车</div>
            <i class="icon icon-03"></i>
          </div>
          <div class="cwgl-wrap-b">{{product.fxjOut13}} 辆/名</div>
        </div>
      </nz-col>
      <nz-col nzMd="24" nzLg="24" nzXl="6" nzXXl="6" class="cwgl-t-b">
        <div class="cwgl-wrap cwgl-t-b-4">
          <div class="cwgl-wrap-t">
            <div class="cwgl-wrap-t-l">合同</div>
            <i class="icon icon-04"></i>
          </div>
          <div class="cwgl-wrap-b">{{product.fxjOut14}} 件</div>
        </div>
      </nz-col>
      <nz-col nzMd="24" nzLg="24" nzXl="6" nzXXl="6" class="cwgl-t-b">
        <div class="cwgl-wrap cwgl-t-b-5">
          <div class="cwgl-wrap-t">
            <div class="cwgl-wrap-t-l">待处理违章数量</div>
            <i class="icon icon-05"></i>
          </div>
          <div class="cwgl-wrap-b">{{product.fxjOut15}} 调</div>
        </div>
      </nz-col>
      <nz-col nzMd="24" nzLg="24" nzXl="6" nzXXl="6" class="cwgl-t-b">
        <div class="cwgl-wrap cwgl-t-b-5">
          <div class="cwgl-wrap-t">
            <div class="cwgl-wrap-t-l">保险到期车辆</div>
            <i class="icon icon-06"></i>
          </div>
          <div class="cwgl-wrap-b">{{product.fxjOut16}} 辆</div>
        </div>
      </nz-col>
      <nz-col nzMd="24" nzLg="24" nzXl="6" nzXXl="6" class="cwgl-t-b">
        <div class="cwgl-wrap cwgl-t-b-5">
          <div class="cwgl-wrap-t">
            <div class="cwgl-wrap-t-l">年检到期车辆</div>
            <i class="icon icon-07"></i>
          </div>
          <div class="cwgl-wrap-b">{{product.fxjOut17}} 辆</div>
        </div>
      </nz-col>
      <nz-col nzMd="24" nzLg="24" nzXl="6" nzXXl="6" class="cwgl-t-b">
        <div class="cwgl-wrap cwgl-t-b-5">
          <div class="cwgl-wrap-t">
            <div class="cwgl-wrap-t-l">合同到期客户</div>
            <i class="icon icon-08"></i>
          </div>
          <div class="cwgl-wrap-b">{{product.fxjOut18}} 个</div>
        </div>
      </nz-col>
      <nz-col nzMd="24" nzLg="24" nzXl="6" nzXXl="6" class="cwgl-t-b">
        <div class="cwgl-wrap cwgl-t-b-5">
          <div class="cwgl-wrap-t">
            <div class="cwgl-wrap-t-l">本月客户生日</div>
            <i class="icon icon-09"></i>
          </div>
          <div class="cwgl-wrap-b">{{product.fxjOut19}} 名</div>
        </div>
      </nz-col>
      <nz-col nzMd="24" nzLg="24" nzXl="6" nzXXl="6" class="cwgl-t-b">
        <div class="cwgl-wrap cwgl-t-b-5">
          <div class="cwgl-wrap-t">
            <div class="cwgl-wrap-t-l">本月保养到期车辆</div>
            <i class="icon icon-10"></i>
          </div>
          <div class="cwgl-wrap-b">{{product.fxjOut20}} 辆</div>
        </div>
      </nz-col>
      <nz-col nzMd="24" nzLg="24" nzXl="6" nzXXl="6" class="cwgl-t-b">
        <div class="cwgl-wrap cwgl-t-b-5">
          <div class="cwgl-wrap-t">
            <div class="cwgl-wrap-t-l">GPS故障车辆</div>
            <i class="icon icon-11"></i>
          </div>
          <div class="cwgl-wrap-b">{{product.fxjOut62}} 辆</div>
        </div>
      </nz-col>
      <nz-col nzMd="24" nzLg="24" nzXl="6" nzXXl="6" class="cwgl-t-b">
        <div class="cwgl-wrap cwgl-t-b-5">
          <div class="cwgl-wrap-t">
            <div class="cwgl-wrap-t-l">本月待回复客户问询</div>
            <i class="icon icon-12"></i>
          </div>
          <div class="cwgl-wrap-b">{{product.fxjOut63}} 起</div>
        </div>
      </nz-col>
    </nz-row>
  </nz-card>
  <!-- <nz-card class="cwgl">
    <div class="cwgl-tita">
      <i class="icon icon-a"></i>
      <span>车辆违章查询</span>
    </div>
    <div class="cwgl-search">

    </div>
    <div class="cwgl-titb">
      <div class="cwgl-titb-l">违章查询记录</div>
      <div class="cwgl-titb-r">
        <div class="down-load" (click)="wzDownLoad()">
          <i class="icon icon-a"></i>
          <span>下载</span>
        </div>
        <div class="send" (click)="wzSend()">
          <i class="icon icon-b"></i>
          <span>发送</span>
        </div>
      </div>
    </div>
    <div class="cwgl-table">
      <nz-table *ngIf="wzbShow" 
      #basicTable 
      [nzData]="wzOfData" 
      [nzTotal]="85" 
      [nzPageSize]="10" 
      [nzPageSizeOptions]="[ 10, 20, 30, 40, 50 ]" 
      nzShowQuickJumper 
      nzShowSizeChanger>
        <thead>
          <tr>
            <th>查询时间</th>
            <th>客户姓名</th>
            <th>电话</th>
            <th>城市</th>
            <th>车牌</th>
            <th>总罚款</th>
            <th>总分</th>
            <th>提醒方式</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of basicTable.data">
            <td>{{data.cxsj}}</td>
            <td>{{data.khxm}}</td>
            <td>{{data.khdh}}</td>
            <td>{{data.khcs}}</td>
            <td>{{data.khcp}}</td>
            <td>{{data.khzfk}}</td>
            <td>{{data.khzf}}</td>
            <td>
              <i (click)="dxWarn(data.id)" class="icon dx"></i>
              <i (click)="wxWarn(data.id)" class="icon wx"></i>
              <i (click)="dhWarn(data.id)" class="icon dh"></i>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </div>
  </nz-card> -->
</nz-spin>